<template>
  <DynamicForm
    ref="dynamicFormRef"
    v-model="formData"
    :form-config="formConfig"
    label-width="100px"
    :gutter="20"
  />
</template>

<script setup lang="ts">
import { ref, reactive } from "vue";
import DynamicForm from "@/components/DynamicForm";
import type {
  FormItemConfig,
  DynamicFormInstance
} from "@/components/DynamicForm";
import { type PermissionFormProps } from "./utils/types";

const props = withDefaults(defineProps<PermissionFormProps>(), {
  formInline: () => ({
    id: null,
    name: "",
    code: "",
    type: 1,
    status: 1,
    description: ""
  })
});

const dynamicFormRef = ref<DynamicFormInstance>();
const formData = ref(props.formInline);

// 动态表单配置
const formConfig: FormItemConfig[] = [
  {
    key: "name",
    name: "权限名称",
    type: "input",
    required: true,
    placeholder: "请输入权限名称",
    col: { xs: 24, sm: 12 }
  },
  {
    key: "code",
    name: "权限标识",
    type: "input",
    required: true,
    placeholder: "请输入权限标识，如：system:user:add",
    rules: [
      {
        pattern: /^[a-zA-Z0-9:_-]+$/,
        message: "权限标识只能包含字母、数字、冒号、下划线和横线",
        trigger: "blur"
      }
    ],
    col: { xs: 24, sm: 12 }
  },
  {
    key: "type",
    name: "权限类型",
    type: "select",
    required: true,
    defaultValue: 1,
    placeholder: "请选择权限类型",
    options: [
      { label: "菜单权限", value: 1 },
      { label: "按钮权限", value: 2 },
      { label: "数据权限", value: 3 }
    ],
    col: { xs: 24, sm: 12 }
  },
  {
    key: "status",
    name: "状态",
    type: "radio",
    defaultValue: 1,
    options: [
      { label: "启用", value: 1 },
      { label: "停用", value: 0 }
    ],
    col: { xs: 24, sm: 12 }
  },
  {
    key: "description",
    name: "权限描述",
    type: "textarea",
    placeholder: "请输入权限描述",
    params: {
      rows: 3,
      maxLength: 200,
      showWordLimit: true
    },
    col: { xs: 24 }
  }
];

function getRef() {
  return dynamicFormRef.value;
}

defineExpose({ getRef });
</script>
